<template>
  <div class="main_box" style="padding-right: 10px">
    <el-card class="header-card">
      <h1 style="margin-bottom: 20px">基本信息</h1>
      <div slot="header">
        <div class="header" v-if="orderInfo">
          <i @click="handleReturnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">订单编号：{{ this.orderInfo.orderNo }}</div>
        </div>
      </div>

      <el-form label-width="200px" v-if="orderInfo">
        <el-row>
          <el-col :span="18">
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名:">
                  <span>{{ orderInfo.linkName || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话:">
                  <span>{{ orderInfo.phone || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址:">
                  <span>{{ (orderInfo.villageName || '') + (orderInfo.buildName || '') + (orderInfo.unitName || '') +
                    (orderInfo.floorName || '') + (orderInfo.houseNumber || '') }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="事件名称:">
                  <span style="color: red">{{ orderInfo.goodsName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="事件类型:">
                  <span v-if="orderInfo.orderSource && orderInfo.orderType">
                    {{ orderTypeAllList.find((c) => c.value === orderInfo.orderType).label }} - {{ orderSourceAllList.find((c) =>  c.value === orderInfo.orderSource).label }}
                  </span>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="下单时间:">
                  <span>{{ orderInfo.orderCreateData || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <img :src="orderInfo.beeperWxUrl" alt="" style="width: 120px;">
            <div style="width: 120px;text-align: center;">{{ orderInfo.beeperCode }}</div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="header-card">
      <h1 style="margin-bottom: 20px">紧急联系</h1>
      <el-tabs v-model="activeTabName" type="border-card" @tab-click="tabChange">
        <el-tab-pane label="默认联系" name="1">
          <el-row style="display: flex; justify-content: flex-end; margin-bottom: 20px; width: 100%">
            <el-button :disabled="selectRow.length === 0" size="mini" @click="handleBatchAutomatic(1)">批量自动拨打</el-button>
          </el-row>
          <el-table ref="table" :data="tableData" :fit="true" @selection-change="(val) => handleSelectionChange(val, 1)"
            highlight-current-row v-loading="loading" element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据！">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column align="center" label="类型">
              <template slot-scope="scope"> {{ scope.row.linkType ? type.find((c) => c.value === scope.row.linkType).label
                : '-' }}</template>
            </el-table-column>
            <el-table-column align="center" label="联系人" prop="linkName" />
            <el-table-column align="center" label="电话" prop="linkPhone" />
            <el-table-column align="center" label="拨打方式">
              <template slot-scope="scope"> {{ scope.row.notifyType ? (scope.row.notifyType === 1 ? '自动拨打' : '手动拨打') : '-'
              }}</template>
            </el-table-column>
            <el-table-column align="center" label="拨打结果" prop="createDate">
              <template slot-scope="scope"> {{ formattedVmsCallState(scope.row.vmsCallState) }}</template>
            </el-table-column>
            <el-table-column align="center" label="结果描述" prop="'vmsCallDesc" />
            <el-table-column align="center" label="操作人" prop="handleUserName" />
            <el-table-column align="center" label="操作时间" prop="handleDate" />
            <el-table-column label="操作" width="290" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleManuallyDial(scope.row)" size="mini">已手动拨打</el-button>
                <el-button @click="handleAutomaticDial(scope.row)" size="mini">自动拨打</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="邻里互助" name="2">
          <el-row style="display: flex; justify-content: flex-end; margin-bottom: 20px; width: 100%">
            <el-button :disabled="neighborSelectRow.length === 0" size="mini"
              @click="handleBatchAutomatic(2)">批量自动拨打</el-button>
          </el-row>
          <el-table ref="table" :data="neighborTableData" :fit="true"
            @selection-change="(val) => handleSelectionChange(val, 2)" highlight-current-row v-loading="loading"
            element-loading-text="数据加载中，请稍后..." empty-text="对不起，没有找到相关数据！">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column align="center" label="类型">
              <template slot-scope="scope"> {{ scope.row.linkType ? type.find((c) => c.value === scope.row.linkType).label
                : '-' }}</template>
            </el-table-column>
            <el-table-column align="center" label="联系人" prop="linkName" />
            <el-table-column align="center" label="电话" prop="linkPhone" />
            <el-table-column align="center" label="拨打方式">
              <template slot-scope="scope"> {{ scope.row.notifyType ? (scope.row.notifyType === 1 ? '自动拨打' : '手动拨打') : '-'
              }}</template>
            </el-table-column>
            <el-table-column align="center" label="拨打结果" prop="createDate">
              <template slot-scope="scope"> {{ formattedVmsCallState(scope.row.vmsCallState) }}</template>
            </el-table-column>
            <el-table-column align="center" label="结果描述" prop="'vmsCallDesc" />
            <el-table-column align="center" label="操作人" prop="handleUserName" />
            <el-table-column align="center" label="操作时间" prop="handleDate" />
            <el-table-column label="操作" width="290" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleManuallyDial(scope.row)" size="mini">已手动拨打</el-button>
                <el-button @click="handleAutomaticDial(scope.row)" size="mini">自动拨打</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页工具条 -->
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
            layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog :title="notifyType === 1 ? '请选择警报类型' : '请选择拨打结果'" :visible.sync="dialogVisible" width="30%">
      <el-select v-model="selectOption" style="width: 100%" placeholder="请选择" v-if="notifyType === 1">
        <el-option v-for="item in EAlarmTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="selectOption" style="width: 100%" placeholder="请选择" v-else>
        <el-option v-for="item in dialStatus" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input type="textarea" style="margin-top: 20px" placeholder="输入备注" v-model="remark"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => {
          dialogVisible = false;
          selectOption = '';
        }
          ">
          取 消
        </el-button>
        <el-button type="primary" @click="handleDialSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OrderApi from '@/api/order/order';
import { EAlarmTypeList, orderSourceList, orderTypeList,orderTypeAllList,
orderSourceAllList } from '../../enum';

export default {
  name: 'OrderUrgentContact',
  data() {
    return {
      orderId: '',
      tableData: [],
      loading: false,
      selectOption: '',
      dialogVisible: false,
      orderTypeAllList,
      orderSourceAllList,
      EAlarmTypeList,
      selectRow: [],
      orderInfo: undefined,
      type: [
        { label: '本人', value: 1 },
        { label: '紧急联系人', value: 2 },
        { label: '物业', value: 3 },
        { label: '楼栋长', value: 4 },
        { label: '120', value: 5 },
        { label: '开锁', value: 6 },
        { label: '邻里互助', value: 7 },
        { label: '小康管家', value: 11 },
        { label: '服务员', value: 12 },
      ],
      dialStatus: [
        { label: '未拨打', value: 1 },
        { label: '已接听', value: 2 },
        { label: '未接听', value: 3 },
        { label: '未拨通', value: 4 },
      ],
      orderNotifyId: '',
      notifyType: 1,
      remark: '',
      activeTabName: '1',
      neighborSelectRow: [],
      neighborTableData: [],
      page: {
        pageNo: 1,
        pageSize: 20,
      },
    };
  },
  mounted() {
    this.orderId = this.$route.query.id;
    this.fetchListDataOperate(this.orderId);
    // this.fetchNeighborDataList(this.orderId);
    this.addEnumtype()
  },
  methods: {
    formattedVmsCallState(vmsCallState) {
      if (vmsCallState) {
        const callState = this.dialStatus.find(c => c.value === vmsCallState);
        return callState ? callState.label : '-';
      } else {
        '-'
      }

    },
    addEnumtype() {
      // this.orderSourceList.push({ value: 10, label: '语音报警' }, { value: 11, label: '按键报警' }, { value: 12, label: '按键拨打报警' })
      // this.orderTypeList.push({ value: 11, label: '急救订单' }, { value: 8, label: '报警' })
    },
    tabChange() {
      if (this.activeTabName == 2) {
        this.fetchNeighborDataList(this.orderId)
      } else {
        this.fetchListDataOperate(this.orderId);
      }
    },
    /**
     * 获取订单数据
     */
    fetchListDataOperate(orderId) {
      this.loading = true;
      OrderApi.listDataOperate({ orderId })
        .then((res) => {
          this.orderInfo = res.data;
          if (res.data.list && res.data.list.length > 0) {
            this.tableData = res.data.list;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 获取邻里列表数据
     */
    fetchNeighborDataList(orderId) {
      const { pageNo, pageSize } = this.page;
      OrderApi.pageHelpDataOperate({ orderId, pageNo, pageSize }).then((res) => {
        if (res.data.list && res.data.list.length > 0) {
          this.neighborTableData = res.data.list;
        }
      });
    },

    /**
     * 选中项
     * @param value
     * @param type
     */
    handleSelectionChange(value, type) {
      if (type === 1) this.selectRow = value;
      if (type === 2) this.neighborSelectRow = value;
    },

    /**
     * 批量自动拨打
     */
    handleBatchAutomatic(type) {
      this.notifyType = 1;
      this.orderNotifyId = type === 1 ? this.selectRow.map((c) => c.orderNotifyId) : this.neighborSelectRow.map((c) => c.orderNotifyId);
      this.dialogVisible = true;
    },

    /**
     * 手动拨打
     * @param row
     */
    handleManuallyDial(row) {
      this.notifyType = 2;
      this.remark = '';
      this.orderNotifyId = row.orderNotifyId;
      this.dialogVisible = true;
    },

    /**
     * 自动拨打
     * @param row
     */
    handleAutomaticDial(row) {
      this.notifyType = 1;
      this.remark = '';
      this.orderNotifyId = row.orderNotifyId;
      this.dialogVisible = true;
    },

    /**
     * 拨打提交
     */
    handleDialSubmit() {
      if (!this.selectOption) {
        this.$message.error(this.notifyType === 1 ? '请选择警报类型' : '请选择拨打结果');
        return;
      }
      const params = {
        orderNotifyId: this.orderNotifyId,
        notifyType: this.notifyType,
        remark: this.remark,
      };
      if (this.notifyType === 1) {
        params.alarmType = this.selectOption;
      } else {
        params.vmsCallState = this.selectOption;
      }
      if (this.notifyType === 1) this.$message('拨打号码中...');

      // 判断是否批量
      if (Array.isArray(this.orderNotifyId)) {
        params.orderNotifyIds = this.orderNotifyId;
        delete params.orderNotifyId;
        delete params.notifyType;
        OrderApi.batchOrderNotifyCall(params)
          .then((res) => {
            this.$message.success('批量自动拨打成功');
            if (this.activeTabName === '1') {
              this.fetchListDataOperate(this.orderId);
            } else {
              this.fetchNeighborDataList(this.orderId);
            }
            this.dialogVisible = false;
            this.selectOption = '';
          })
          .catch(() => {
            this.dialogVisible = false;
            this.selectOption = '';
          });
      } else {
        OrderApi.orderNotifyCall(params)
          .then((res) => {
            this.$message.success(this.notifyType === 1 ? '自动拨打成功' : '已手动拨打电话');
            if (this.activeTabName === '1') {
              this.fetchListDataOperate(this.orderId);
            } else {
              this.fetchNeighborDataList(this.orderId);
            }
            this.dialogVisible = false;
            this.selectOption = '';
          })
          .catch(() => {
            this.dialogVisible = false;
            this.selectOption = '';
          });
      }
    },

    /**
     * 返回列表
     */
    handleReturnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back();
    },

    handleSizeChange(size) {
      this.page.pageSize = size;
      this.fetchNeighborDataList(this.orderId);
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.fetchNeighborDataList(this.orderId);
    },
  },
};
</script>

<style lang="scss">
@import '@/assets/css/views/detailType.scss';
</style>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 600px;

  .bm-view {
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
